<template>
  <px-card shadow="always">
    <div class="days-grid">
      <px-check-tag v-for="day in days" :key="day" class="days-grid-item" :checked="modelValue.includes(day)" @change="toggleDay(day)">
        {{ day }}
      </px-check-tag>
    </div>
  </px-card>
</template>

<script setup>
import { ref, defineProps, watch } from "vue";
const emits = defineEmits(["dayChange"]);

// 定义接收的 props
const props = defineProps({
  daysInMonth: {
    type: Number,
    default: 31
  }
});

const selected = defineModel();

// 定义月份的天数（默认31天）
const days = ref(Array.from({ length: props.daysInMonth }, (_, i) => String(i + 1)));

// 切换选中的天数
const toggleDay = day => {
  if (selected.value.includes(day)) {
    const index = selected.value.indexOf(day);
    selected.value.splice(index, 1);
  } else {
    selected.value.push(day);
  }
  emits("dayChange", selected.value);
};

// 如果 daysInMonth 发生变化，更新 days 数组
watch(
  () => props.daysInMonth,
  newDaysInMonth => {
    days.value = Array.from({ length: newDaysInMonth }, (_, i) => String(i + 1));
  }
);
</script>

<style lang="scss" scoped>
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;

  &-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
  }
}
</style>
